<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('add.no44')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('newcrumbs.crumbsTwe')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('add.no45')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('rule.no7')}}({{ruleSetName}})</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- ------------搜索查询栏开始-------------- -->
    <search 
      :searchData="searchData" 
      @search="search" 
      :searchRight="true"
    ></search>

    <div class="list_operation" v-if="$store.state.common.permiss.ruleList.includes('ruleListS')">
      <el-button 
        v-if="showSort"
        type="primary" 
        @click="changeSortTable"
        >
        {{$t('rule.no16')}}
      </el-button>
      <el-button 
        v-else
        type="primary" 
        @click="sortList"
        >
        {{$t('rule.no17')}}
      </el-button>
      <!-- <el-button 
        v-if="ruleSetDetail.isExcute==-1"
        type="primary" 
        @click="gogogo"
        >
        {{$t('rule.no18')}}
      </el-button>
      <el-button 
        v-else
        type="primary" 
        >
        {{$t('rule.no18')}}
      </el-button> -->
    </div>

    <!-- -------------表单显示栏------------------------ -->
    <div class="table" v-if="showSort" style="height:500px">
      <template>
        <el-table :data="tableData" size="small" v-loading="loadFlag" height="550">
          <el-table-column align="center" prop="id" label="ID">
          </el-table-column>
          <el-table-column align="center" prop="ruleType" :label="$t('rule.no13')">
          </el-table-column>
          <el-table-column align="center" prop="executeSort" :label="$t('rule.no31')">
          </el-table-column>
          <el-table-column align="center" prop="effective" :label="$t('rule.no15')">
            <template slot-scope="scope">
              <span >{{scope.row.effective==1?$t('loanMoney.isOverdue_options.no1'):$t('loanMoney.isOverdue_options.no2')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="executeResult" :label="$t('rule.no32')">
            <template slot-scope="scope">
              <span >{{scope.row.executeResult==1?'Transfer':scope.row.executeResult==2?'Pass':scope.row.executeResult==-1?'Reject':''}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="conditionOne" :label="$t('rule.no33')">
          </el-table-column>
          <el-table-column align="center" prop="thresholdOne" :label="$t('rule.no34')">
          </el-table-column>
          <el-table-column align="center" prop="logicRelationOne" :label="$t('rule.no35')">
          </el-table-column>
          <el-table-column align="center" prop="conditionTwo" :label="$t('rule.no45')">
          </el-table-column>
          <el-table-column align="center" prop="thresholdTwo" :label="$t('rule.no46')">
          </el-table-column>
          <el-table-column align="center" prop="logicRelationTwo" :label="$t('rule.no35')">
          </el-table-column>
          <el-table-column align="center" prop="conditionThree" :label="$t('rule.no47')">
          </el-table-column>
          <el-table-column align="center" prop="thresholdThree" :label="$t('rule.no48')">
          </el-table-column>
          <el-table-column align="center" prop="executeLimit" :label="$t('rule.no36')">
          </el-table-column>
          <el-table-column fixed="right" align="center" prop="operation" min-width="120" :label="$t('public.operation')">
            <template slot-scope="scope">
              <span 
                class="table_opr"
                @click="modifyRule(scope.row)">
                {{$t('public.no51')}}
              </span>
              <span 
                v-if="$store.state.common.permiss.ruleList.includes('del')"
              class="table_opr" 
              @click="showDel(scope.row.id)">{{$t('idManage.del')}}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div  v-else>
      <el-table 
        :data="tableData"
        row-key="id"
        align="left">
      <el-table-column v-for="(item, index) in col"
          :key="`col_${index}`"
          :prop="item.prop"
          :label="item.label"> 
            <template slot-scope="scope" >
              <span v-if="item.prop=='status'">{{scope.row.status==1?$t('loanMoney.isOverdue_options.no1'):$t('loanMoney.isOverdue_options.no2')}}</span>
              <span v-else-if="item.prop=='executeResult'">{{scope.row.executeResult==1?'Transfer':scope.row.executeResult==2?'Pass':scope.row.executeResult==-1?'Reject':''}}</span>
              <span v-else>{{scope.row[item.prop]}}</span>
            </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')">
          <template slot-scope="scope">
            <span 
              class="table_opr"
              @click="modifyRule(scope.row)">
              {{$t('public.no51')}}
            </span>
            <span class="table_opr" @click="showDel(scope.row.id)">{{$t('idManage.del')}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :title="$t('public.no51')" :visible.sync="detailFlag" width="95%" top="20vh">
      <el-form :model="ruleForm" size="small"  ref="ruleForm" label-width="120px">
        <div class="flex">
          <el-form-item :label="$t('rule.no13')" >
            <el-input v-model="ruleForm.ruleType" disabled style="width:216px" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('rule.no40')" >
            <el-input v-model="ruleSetName" disabled style="width:216px" ></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item :label="$t('rule.no15')" >
            <el-switch v-model="ruleForm.effective" :active-value="1"
          :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item :label="$t('rule.no32')" >
            <el-radio-group v-model="ruleForm.executeResult">
              <el-radio :label="-1">Reject</el-radio>
              <el-radio :label="2">Pass</el-radio>
              <el-radio :label="1">Transfer</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item :label="$t('rule.no33')" prop="messageType">
            <el-input v-model="ruleForm.conditionOne" disabled style="width:216px" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('rule.no34')" prop="messageType">
            <el-input v-model="ruleForm.thresholdOne" :disabled="!ruleForm.conditionOne" style="width:80px" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('rule.no35')" prop="messageType">
            <el-input v-model="ruleForm.logicRelationOne" disabled style="width:216px" ></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item :label="$t('rule.no45')" prop="messageType">
            <el-input v-model="ruleForm.conditionTwo" disabled style="width:216px" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('rule.no46')" prop="messageType">
            <el-input v-model="ruleForm.thresholdTwo" :disabled="!ruleForm.conditionTwo" style="width:80px" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('rule.no35')" prop="messageType">
            <el-input v-model="ruleForm.logicRelationTwo" disabled style="width:216px" ></el-input>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item :label="$t('rule.no47')" prop="messageType">
            <el-input v-model="ruleForm.conditionThree" disabled style="width:216px" ></el-input>
          </el-form-item>
          <el-form-item :label="$t('rule.no48')" prop="messageType">
            <el-input v-model="ruleForm.thresholdThree" :disabled="!ruleForm.conditionThree"  style="width:80px" ></el-input>
          </el-form-item>
        </div>
        <el-form-item :label="$t('rule.no36')" prop="messageType">
            <el-input v-model="ruleForm.executeLimit"  style="width:100px" ></el-input>
          </el-form-item>
      </el-form>
      <p class="mt15"><span class="red">{{$t('rule.no42')}}:</span>  {{modifyHitory.createTime}} </p>
      <p class="mt15" ><span class="red">{{$t('rule.no43')}}: </span> <span v-html="modifyHitory.all"> {{modifyHitory.all}} </span>   </p>
      <div class="button">
        <el-button type="primary" @click="submit">{{$t('public.no49')}}</el-button>
        <el-button type="primary" @click="detailClose">{{$t('public.no50')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="$t('idManage.del')" :visible.sync="deleteFlag" width="560">
      <h4 class="mb20">{{$t('rule.no44')}}</h4>
      <div class="button">
        <el-button type="primary" @click="delSure">{{$t('public.no49')}}</el-button>
        <el-button type="primary" @click="deleteFlag = false">{{$t('public.no50')}}</el-button>
      </div>
    </el-dialog>

    <div class="foot"></div>

  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'

export default {
  components: {
      draggable,
  },
  name: 'ruleEngine',
  data () {
    const searchData=[
      {
        type: 'input',
        label: 'rule.no12',
        attr: 'id',
        value: ''
      },{
        type: 'input',
        label: 'rule.no13',
        attr: 'ruleDesc',
        value: ''
      },{
        type: 'select',
        label: 'rule.no14',
        attr: 'executeResult',
        option: this.$store.state.options.ruleuserResult_option,
        value: '',
        langFlag: false,
      },{
        type: 'select',
        label: 'rule.no15',
        attr: 'effective',
        option: this.$store.state.options.ruleuserIsYse_option,
        value: '',
        langFlag: true,
      }]
    return {
      flag: true,
      loadFlag: true,
      sessionid: '',
      pageTotal: 0,
      currentPage: 1,// 当前页下标
      ruleSetId: '',
      ruleSetName: '',
      isExcute: '',
      updateTime: '',
      searchData: searchData,
      formInline: {// 查询信息数据对应字段
        ruleSetId: '',
        id: '',
        ruleId: '',
        ruleName: '',
        status: '',
        executeResult: '',
      },
      tableData: [],
      detailFlag: false,
      detailData: {},
      modifyHitory: {},
      deleteFlag: false,
      showSort: true,
      delId: '',
      col: [
        {
          label: 'ID',
          prop: 'ruleId'
        },
        {
          label: 'rule.no13',
          prop: 'ruleType'
        },
        {
          label: 'rule.no31',
          prop: 'executeSort'
        },
        {
          label: 'rule.no15',
          prop: 'status',
          
        },
        {
          label: 'rule.no32',
          prop: 'executeResult'
        },
        {
          label: 'rule.no33',
          prop: 'conditionOne'
        },
        {
          label: 'rule.no34',
          prop: 'thresholdOne'
        },
        {
          label: 'rule.no35',
          prop: 'logicRelationOne'
        },
        {
          label: 'rule.no45',
          prop: 'conditionTwo'
        },
        {
          label: 'rule.no46',
          prop: 'thresholdTwo'
        },
        {
          label: 'rule.no35',
          prop: 'logicRelationTwo'
        },
        {
          label: 'rule.no47',
          prop: 'conditionThree'
        },
        {
          label: 'rule.no48',
          prop: 'thresholdThree'
        },
        {
          label: 'rule.no36',
          prop: 'executeLimit'
        },
      ],
      ruleSetDetail:{},
      ruleForm: {
        id : '',
        ruleType : '',
        effective : '',
        executeSort : '',
        executeLimit : '',
        executeResult : '',
        thresholdOne : '',
        thresholdTwo : '',
        thresholdThree : '',
        conditionOne : '',
        conditionTwo : '',
        conditionThree : '',
        logicRelationOne : '',
        logicRelationTwo : '',
      }
    }
  },
  computed: {
  },
  methods: {
    getTableData () { // 获取列表数据
      let option = {
        param: {
          ...this.formInline,
          ruleSetId: this.ruleSetId
        }
      }
      this.$axios.post(this.$action.risk_rule_list,option).then(res=>{
        this.flag = true;
        if(res.code==200){
          this.tableData = res.data;
        }
        this.loadFlag = false;
      })
    },
    search(search) { // 搜索
      this.formInline = {
        id: search.id,
        ruleSetId: this.ruleSetId,
        ruleDesc:search.ruleDesc,
        effective: search.effective,
        executeResult: search.executeResult,
      };
      this.getTableData();
    },
    modifyRule(row){
      this.ruleForm.id = row.id;
      this.ruleForm.ruleType = row.ruleType;
      this.ruleForm.effective = row.effective?1:0;
      this.ruleForm.executeSort = row.executeSort;
      this.ruleForm.executeLimit = row.executeLimit;
      this.ruleForm.executeResult = row.executeResult;
      this.ruleForm.thresholdOne = row.thresholdOne;
      this.ruleForm.thresholdTwo = row.thresholdTwo;
      this.ruleForm.thresholdThree = row.thresholdThree;
      this.ruleForm.conditionOne = row.conditionOne;
      this.ruleForm.conditionTwo = row.conditionTwo;
      this.ruleForm.conditionThree = row.conditionThree;
      this.ruleForm.logicRelationOne = row.logicRelationOne;
      this.ruleForm.logicRelationTwo = row.logicRelationTwo;
      this.getModifyHistory();
    },
    submit(){
      let option = {
        param: {
          ...this.ruleForm
        },
      }
      this.$axios.post(this.$action.risk_rule_modification,option).then(res=>{
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'));
          this.getTableData();
          this.detailClose();
        } else {
          this.$globalMsg.error(res.message);
        }
      })
    },
    detailClose(){
      this.detailFlag = false;
      this.sequence = '';
      this.isUsing = false;
      this.result = '';
      this.notTalking = '';
      this.conditionOne = '';
      this.conditionTwo = '';
      this.conditionThree = '';
      this.thresholdOne = '';
      this.thresholdTwo = '';
      this.thresholdThree = '';
      this.modifyHitory = {};
    },
    getModifyHistory(){// 查询规则详情
      let option = {
        param: {
          ruleId: this.ruleForm.id,
        }
      }
      this.$axios.post(this.$action.risk_rule_record, option).then(res => {
        if (res.code == 200) {
          if(res.data){
            let history = res.data;
            this.modifyHitory.createTime = history.createTime
            let str = ``
            if(history.executeLimit){
              str+=` <b>${this.$t('rule.no36')}</b>: ${history.executeLimit}; `
            }
            if(history.executeResult){
              str+=` <b>${this.$t('rule.no32')}</b>: ${history.executeResult==-1?'Reject':history.executeResult==1?'reject':'Pass'}; `
            }
            if(history.effective){
              str+=` <b>${this.$t('rule.no15')}</b>: ${history.effective==1?this.$t('rule.no3'):this.$t('rule.no4')}; `
            }
            if(history.thresholdOne){
              str+=` <b>${this.$t('rule.no34')}</b>: ${history.thresholdOne}; `
            }
            if(history.thresholdTwo){
              str+=` <b>${this.$t('rule.no46')}</b>: ${history.thresholdTwo}; `
            }
            if(history.thresholdThree){
              str+=` <b>${this.$t('rule.no48')}</b>: ${history.thresholdThree}; `
            }
            this.modifyHitory.all = str
          }
        }
        this.detailFlag = true;
      })
    },
    delSure(){
      let option = {
        param: {
          id: this.delId,
        }
      }
      this.$axios.post(this.$action.risk_rule_remove,option).then(res=>{
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'));
          this.getTableData();
          this.deleteFlag = false;
        } else {
          this.$globalMsg.error(res.message);
        }
      })
    },
    showDel(id){
      this.deleteFlag = true;
      this.delId = id;
    },
    sortList(){
      let option = {
        param: {
          ruleSetId: this.ruleSetId,
          ruleIds: this.tableData.map(value=>value = value.id)
        }
      }
      this.$axios.post(this.$action.risk_rule_order,option).then(res=>{
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'));
          this.getTableData();
          this.changeSortTable();
        } else {
          this.$globalMsg.error(res.message);
        }
      })
    },
    //行拖拽
    rowDrop() {
      if(this.flag){
        const tbody = document.querySelector('.el-table__body-wrapper tbody')
        const _this = this
        Sortable.create(tbody, {
          disabled: _this.showSort,
          onEnd({ newIndex, oldIndex }) {
            const currRow = _this.tableData.splice(oldIndex, 1)[0]
            _this.tableData.splice(newIndex, 0, currRow)
          }
        })
      }
      
    },
    changeSortTable(){
      this.showSort = !this.showSort;
      this.$nextTick(() => {
        this.rowDrop();
      })
    },
    getDetailData(){// 获取上次修改记录
      let option = {
        param: {
          ruleId: this.ruleSetId,
        }
      }
      this.$axios.post(this.$action.risk_rule_record,option).then(res=>{
        if (res.code == 200) {
          this.ruleSetDetail = res.data
        }
      })
    }
  },
  watch: {
    detailFlag(){
      if(!this.detailFlag){
        this.detailClose()
      }
    }
  },
  mounted () {
    this.sessionid = sessionStorage.getItem('sessionid');
    this.ruleSetId = this.$route.query.ruleSetId;
    this.ruleSetName = this.$route.query.ruleSetName;
    // this.rowDrop();
    this.getTableData();
    
  }
}
</script>

<style scoped lang="scss">
  .ruletable{
    width: 100%;
  }
  .box{
    width: 100%;
  }
  table{
    margin-bottom: 1em;
    overflow: auto;
    box-sizing: border-box;
    display: table;
    text-shadow: 0px 1px 0px #fff;
    border-collapse: collapse;
    border-spacing: 0;
    color: #292e31;
    font-size: 14px;
    tr:last-child {
        border-bottom: 1px solid #ccc;
    }
    tr {
        display: table-row;
        vertical-align: inherit;
        border-color: inherit;
    }
    th {
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        // vertical-align: bottom;
        line-height: 1.6;
        text-align: left;
        font-weight: bold;
        display: table-cell;
    }
    tr:nth-child(odd)>td {
        background-color: #f8f8f8;
    }
    td.nowrap {
        word-break: keep-all;
        white-space: nowrap;
    }
    td{
        display: table-cell;
        padding: 10px;
        vertical-align: middle;
        line-height: 1.6;
    }
  }
  table label.el-radio {
    margin-right: 10px;
  }
  .button {
    display: flex;
    justify-content: center;
    button: {
      margin: 0 20px;
    }
  }
  .time{
    background-color: #ffffff;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .table1{
    width: 100%;
    min-height: 440px;
  }
</style>
